import React, { useState, useEffect } from 'react';
import Header from './components/Header/Header';
import List from './components/List/List';
import Footer from './components/Footer/Footer';
import Item from './components/Item/Item';
import './App.css';
import PubSub from 'pubsub-js';

export default function App() {
  const [list, setList] = useState(JSON.parse(localStorage.getItem('todo')) || []);

  useEffect(() => {
    // 用于订阅子组件发出的话题,来实现增删改查的业务逻辑
    //添加一条数据
    const addId = PubSub.subscribe('add', (topic, todoName) => {
      setList((list) => {
        const obj = {
          id: Date.now(),
          isDone: false,
          todoName,
        };
        const newList = [...list];
        newList.push(obj);
        return newList;
      });
    });
    //修改checkedbox的选中状态,就是修改对应一条数据的isDone
    const changeCheckedId = PubSub.subscribe('changeChecked', (topic, id) => {
      setList((list) => {
        const newList = [...list].map((item) => {
          if (item.id === id) item.isDone = !item.isDone;
          return item;
        });
        console.log(newList);
        return newList;
      });
    });
    //根据id删除对应一条数据
    const delTodoId = PubSub.subscribe('delTodo', (topic, id) => {
      setList((list) => {
        const newList = list.filter((item) => {
          return item.id !== id;
        });
        return newList;
      });
    });
    //根据isDone,清除对应一条数据
    const clearIsDoneId = PubSub.subscribe('clearIsDone', (topic) => {
      setList((list) => {
        const newList = list.filter((item) => {
          return item.isDone === false; /* 留下未完成的 */
        });
        return newList;
      });
    });
    // 定义全选全不选的订阅
    const checkedAllId = PubSub.subscribe('checkedAll', (topic) => {
      // 先确定 选择需要全选的方向
      const isAll = list.every((item) => {
        return item.isDone === true;
      });
      setList((list) => {
        const newList = [...list].map((item) => {
          item.isDone = !isAll;
          return item;
        });
        console.log(newList);
        return newList;
      });
    });
    const updateTodoId = PubSub.subscribe('updateTodo', (topic, data) => {
      // 先确定 选择需要全选的方向
      const { todoName, id } = data;
      setList((list) => {
        const newList = [...list].map((item) => {
          if (item.id === id) item.todoName = todoName;
          return item;
        });
        return newList;
      });
    });
    // console.log('这里的执行时机是?,每写后面的空数组,更新阶段会执行,app一次,item一次?');
    localStorage.setItem('todo', JSON.stringify(list));
    return () => {
      // 因为卸载阶段会进来执行这里的代码,用来执行卸载阶段的订阅
      // 每次更新完毕都要把上一次的订阅先删除
      PubSub.unsubscribe(changeCheckedId);
      PubSub.unsubscribe(delTodoId);
      PubSub.unsubscribe(checkedAllId);
      PubSub.unsubscribe(clearIsDoneId);
      PubSub.unsubscribe(updateTodoId);
      PubSub.unsubscribe(addId);
    };
  });

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header></Header>
        <div>
          <List>
            {list.map((item) => {
              //Item标签里面要渲染数据,通过props传输
              return <Item key={item.id} todo={item}></Item>;
            })}
          </List>
          {list.length === 0 ? <h1 className={'center'}>暂无数据</h1> : <Footer list={list}></Footer>}
        </div>
      </div>
    </div>
  );
}
